<template>
	<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper" @scrolltolower="lower"
		@scroll="scroll">
		<view class="container">
			<view class="top">
				<image src="../../../static/img/yonghu.jpg" mode=""></image>
				<view class="name">
					心事全在脸上
				</view>
			</view>
			<view class="dingdan">
				<view class="dingdanzuo" @click="tiaozhuandingdan"  >
					我的订单
				</view>
				<view class="dingdanyou">
					查看全部
				</view>
			</view>
			<view class="dai">
				<view class="IMG" @click="tiaozhuan">
					<image src="/static/img/qianbao.png" mode=""></image>
					<view class="wenzi" >
						待支付
					</view>
				</view>
				<view class="IMG" @click="tiaozhuan"  >
					<image src="../../../static/img/daifahuo.png" mode=""></image>
					<view class="wenzi">
						待发货
					</view>
				</view>
				<view class="IMG" @click="tiaozhuan">
					<image src="../../../static/img/daiqianshou.png" mode=""></image>
					<view class="wenzi">
						待签收
					</view>
				</view>
				<view class="IMG" @click="tiaozhuan">
					<image src="../../../static/img/yiwancheng.png" mode=""></image>
					<view class="wenzi">
						已完成
					</view>
				</view>

			</view>
			<view class="shoucang">
				<view class="shoucangitem">
					<view class="shoucangitemtop">
						2
					</view>
					<view class="shoucangitembottom">
						我的收藏
					</view>
				</view>
				<view class="shoucangitem">
					<view class="shoucangitemtop">
						2
					</view>
					<view class="shoucangitembottom">
						我的消息
					</view>
				</view>
				<view class="shoucangitem">
					<view class="shoucangitemtop">
						2
					</view>
					<view class="shoucangitembottom">
						我的足迹
					</view>
				</view>
			</view>


			<view class="zhongxin">
				<view class="zhongxinitem">
					<van-cell value=">">
						<template #title>
							<van-icon name="cart-o" /> 分销中心
						</template>
					</van-cell>
					<van-cell value=">">
						<template #title>
							<van-icon name="coupon-o" /> 领券中心
						</template>
					</van-cell>
					<van-cell value=">">
						<template #title>
							<van-icon name="bookmark-o" /> 我的优惠券
						</template>
					</van-cell>
					<van-cell value=">">
						<template #title>
							<van-icon name="location-o" /> 收货地址
						</template>
					</van-cell>
				</view>
			</view>
			<view class="anniu">
				<van-button type="danger" @click="tuichu"  >退出登录</van-button>
			</view>
		</view>
	</scroll-view>

</template>

<script>

	export default {
		data() {
			return {

			};
		},
		methods:{
			tiaozhuan(){
				uni.navigateTo({
					url:"/pages/daifahuo/daifahuo/daifahuo"
				})
			},
			tuichu(){
				uni.navigateTo({
					url:"/pages/index/index"
				})
			},
			tiaozhuandingdan(){
				uni.navigateTo({
					url:"/pages/goumai/goumai/goumai"
				})
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		flex-direction: column;

		.top {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			height: 500rpx;

			image {
				width: 300rpx;
				height: 300rpx;
				border-radius: 50%;
			}

			.name {
				margin-top: 30rpx;
				font-weight: 700;
			}
		}

		.dingdan {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx;
			border-top: 8px solid #c0c0c0;
			border-bottom: 5px solid #c0c0c0;

			.dingdanzuo {
				font-weight: 700;
				font-size: 50rpx;
			}

			.dingdanyou {
				color: #7f7f7f;
				font-size: 40rpx;
				font-weight: 100;
			}
		}

		.dai {
			display: flex;
			margin-top: 50rpx;
			border-bottom: 5px solid #c0c0c0;
			padding-bottom: 50rpx;

			.IMG {
				width: 25%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				image {
					width: 70rpx;
					height: 70rpx;

				}

				.wenzi {
					font-size: 20rpx;
				}
			}

		}

		.shoucang {
			margin-top: 50rpx;
			display: flex;
			border-bottom: 5px solid #c0c0c0;
			padding-bottom: 50rpx;

			.shoucangitem {
				width: 33%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}
		}
		.anniu{
			margin-top: 20rpx;
			display: flex;
			justify-content: center;
		}
	}
</style>